<template>
  <div>
    <el-main>
      <el-table v-loading="listLoading" ref="table" border class="table-bottom" :data="tableData" style="width:100%"
        element-loading-text="数据加载中...">
        <el-table-column align="center" type="index" label="序号" width="60" />
        <el-table-column prop="contractCode" label="合同编码" width="200" align="center" show-overflow-tooltip />
        <el-table-column prop="code" label="站址编码" width="200" align="center" show-overflow-tooltip />
        <el-table-column prop="chinaName" label="站址名称" width="200" align="center" show-overflow-tooltip />
        <el-table-column prop="propertyCharacterDesc" label="产权性质(描述）" width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="contractAmount" :formatter="formatMoney" label="合同总金额(元)" width="120" align="center"
          show-overflow-tooltip />
        <el-table-column prop="contractRentAmout" :formatter="formatMoney" label="合同基本年租金(元)" width="120" align="center"
          show-overflow-tooltip />
        <el-table-column prop="contractArea" label="合同面积" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="contractAverage" :formatter="formatMoney" label="合同平均场租(元)" width="120" align="center"
          show-overflow-tooltip />
        <el-table-column prop="contractState" label="合同状态" align="center" width="100" show-overflow-tooltip />
        <el-table-column prop="contractBeginDate" label="开始日期" align="center" width="150" show-overflow-tooltip />
        <el-table-column prop="contractEndDate" label="结束日期" width="150" align="center" show-overflow-tooltip />
        <el-table-column prop="years" label="年限" align="center" width="150" show-overflow-tooltip />
        <el-table-column prop="ownerName" label="业主姓名" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="dealStaffName" label="经办人名称" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="ownerType" label="业主类型" width="100" align="center" show-overflow-tooltip />
        <el-table-column prop="ownerTypeName" label="业主类型名称" width="100" align="center" show-overflow-tooltip />
      </el-table>
      <el-row>
        <el-col :span="24">
          <el-pagination :page-sizes="[5, 10, 25, 50]" :current-page="paginationData['currentPage']" :page-size="paginationData['pageSize']"
            :total="paginationData['total']" layout="total, sizes, prev, pager, next, jumper" @current-change="currentChange"
            @size-change="handleSizeChange" />
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        listLoading: false,
        tableData: [],
        query: {},
        paginationData: {
          currentPage: 1,
          pageSize: 10,
          total: 0
        }
      }
    },
    created() {
      this.getRouteQuery()
      this.getContentDetail()
    },
    mounted() {},
    methods: {
      getRouteQuery() {
        this.query = this.$route.query
      },
      // 分页跳转
      currentChange(targetPage) {
        this.paginationData['currentPage'] = targetPage
        // table数据接口
        this.getPageData()
      },
      // 分页跳转
      handleSizeChange(size) {
        this.paginationData['pageSize'] = size
        this.paginationData['currentPage'] = 1
        // table数据接口
        this.getPageData()
      },
      getPageData() {
        if (this.paginationData.currentPage * this.paginationData.pageSize <= this.paginationData.total) {
          this.tableData = this.allData.slice((this.paginationData.currentPage - 1) * this.paginationData.pageSize,
            this.paginationData.currentPage * this.paginationData.pageSize)
        } else {
          this.tableData = this.allData.slice((this.paginationData.currentPage - 1) * this.paginationData.pageSize,
            this.paginationData.total)
        }
      },
      async getContentDetail() {
        const data = {
          datas: [this.query]
        }
        const r = await this.$http({
          url: this.$http.adornBizUrl('/site/findDetailByOwnerTypeAndPriceId'),
          method: 'post',
          data: this.$http.adornData('param=' + JSON.stringify(data), false),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          }
        })
        this.allData = r.data.data
        this.paginationData['total'] = this.allData.length
        this.getPageData()
      },
      formatMoney(row, column) {
        let value = ''
        var num = row[column.property]
        if (num > 0) {
          value = num
          if (value > 999) {
            let parts = value.toString().split('.')
            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
            value = parts.join('.')
          }
        }
        return value
      }
    }
  }
</script>
